<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Model</title>
    <style>
        input.ng-invalid {
            background-color: lightblue;
        }
    </style>

    <script src="js/angular.min.js"></script>
</head>
<body>
<!--ng-model指令-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--名字: <input ng-model="name">-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller("myCtrl", function ($scope) {-->
        <!--$scope.name = "John Doe";-->
    <!--})-->
<!--</script>-->

<!--双向绑定-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--名字: <input ng-model="name">-->
    <!--<h1>你输入了:{{name}}</h1>-->
<!--</div>-->
<!--<p>修改输入框的值, 标题的名字也会相应修改</p>-->
<!--<script>-->
<!--var app = angular.module('myApp', []);-->
<!--app.controller("myCtrl", function ($scope) {-->
<!--$scope.name = "John Doe";-->
<!--})-->
<!--</script>-->

<!--验证用户输入-->
<!--<form ng-app="" name="myForm">-->
    <!--Email:-->
    <!--<input type="email" name="myAddress" ng-model="text">-->
    <!--<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>-->
<!--</form>-->

<!--应用状态-->
<!--<form ng-app="" name="myForm" ng-init="myText='test@runoob.com'">-->
    <!--Email:-->
    <!--<input type="email" name="myAddress" ng-model="myText" required>-->
    <!--<p>编辑邮箱地址, 查看状态的改变。</p>-->
    <!--<h1>状态</h1>-->
    <!--<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为true)</p>-->
    <!--<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为true)</p>-->
    <!--<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为true)</p>-->
<!--</form>-->

<!--CSS类-->
<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>
</body>
</html>